<template>
    <div class="returnGoodsApply">
        <div class="set-return">
          <div style="background: #fff">
            <split-vertical title="退货申请"></split-vertical>
          </div>

            <div class="table">
                <el-table
                :data="arr"
                border
                @cell-dblclick="celldblclick"
                highlight-current-row
                style="width: 100%" >
                <el-table-column
                :show-overflow-tooltip="true"
                prop="channelName"
                label="订单平台">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="companyName"
                label="订单公司" >
                </el-table-column>
                <el-table-column
                prop="orderCode"
                label="订单编号"
                :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="orderTime"
                label="订单时间" >
                </el-table-column>
                <el-table-column
                prop="receiverName"
                label="姓名"
                width="80">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="receiverContact"
                label="联系方式"
                width="110" >
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="receiverAddress"
                label="地址"
                width="110" >
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="province"
                label="省"
                width="110" >
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="city"
                label="市"
                width="110" >
                </el-table-column>
                <el-table-column
                prop="district"
                label="区"
                :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="orderMoney"
                label="订单金额"
                width="80" >
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="agencyFee"
                label="佣金值"
                width="80" >
                </el-table-column>
                <el-table-column
                :show-overflow-tooltip="true"
                prop="orderStatus"
                label="订单状态"
                width="80" >
                </el-table-column>
                </el-table>
            </div>
            <div class="info">
              <split-vertical title="商品信息"></split-vertical>
              <el-table
                @selection-change="handleSelectionChange"
                :data="items"
                border
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="itemCode"
                  label="商品编码"
                  width="100">
                </el-table-column>
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="itemSkuName"
                  label="商品名称" >
                </el-table-column>
                <el-table-column
                  prop="purchaseNum"
                  label="购买数量"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="surplusNum"
                  label="可退数量" >
                </el-table-column>
                <el-table-column
                  prop="receiverName"
                  label="入仓仓库">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.depotCode" placeholder="请选择"  size="small" clearable  :disabled="scope.row.flag == 0"  >
                      <el-option
                        v-for="item in stockIn"
                        :key="item.id"
                        :label="item.depotName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  :show-overflow-tooltip="true"
                  label="退货数量">
                  <template  slot-scope="scope">
                    <el-input-number v-model="scope.row['returnNum']" :step="1"  controls-position="right" :min="1" @change="changeVal($event)" :disabled="scope.row.flag == 0" size="small"></el-input-number>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="inputNum">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="退还金额" prop="returnMoney">
                        <el-input v-model="ruleForm.returnMoney" placeholder="退还金额" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="退还佣金值" prop="returnAgency">
                        <el-input v-model="ruleForm.returnAgency" placeholder="退还佣金值" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="承担物流费用">
                        <el-input v-model="returnData.postageAssume" placeholder="承担物流费用" ></el-input>
                    </el-form-item>
                    <el-form-item label="额外赔偿费用">
                        <el-input v-model="returnData.extraCharges" placeholder="额外赔偿费用" ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="btn">
            <el-button size="medium" type="primary"  @click="submitForm('ruleForm')" style="margin:0 10px;">提交</el-button>
            <el-button size="medium" @click="back">取消</el-button>
        </div>
    </div>
</template>
<script>
import SplitVertical from "components/common/SplitVertical"
import {localStorage} from "js/localStorage"
export default {
    components:{
      SplitVertical
    },
    data(){
        return{
            num:'',
            returnData:{},
            items:[],
            arr:[],
            /** 承担物流费用 */
            postageAssume:'',
            /** 额外补偿费用 */
            extraCharges:'',
            depotName:'',
            stockIn:[],
            returnNumber:'',
            depotCode:'',
            itemId:'',
            ruleForm:{
                /** 退还金额 */
                returnMoney:'',
                /** 退还佣金值 */
                returnAgency:''
            },
            rules:{
                returnMoney: [
                    { required: true, message: '退还金额不能为空', trigger: 'blur' },
                ],
                returnAgency: [
                    { required: true, message: '退还佣金值不能为空', trigger: 'change' }
                ],
            },
            valArr:[],
            data:{},
            itemSkuName:'',
            skuName:'',
            selection:[],
            itemsArr:[],
            id:''
        }
    },
    created(){
        this.id=this.$route.query.returnGoods
        this.init()
        this.userId= localStorage.get('userID')
    },
    methods:{
        init(){
            this.returngoods()
        },
      //实现双击复制
        celldblclick (row, column, cell, event) {
          var _this=this
          this.$copyText(row[column.property]).then(function (e) {
            _this.$message.success("复制成功")
          }, function (e) {

          })
        },
        returngoods(){
            let parmas={
               complainId:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.returnData=data.data
                    this.arr.push(this.returnData)
                    this.returnData.items.forEach(element => {
                        var item = {
                        itemId:'',
                        itemCode:'',
                        itemSkuName:'',
                        purchaseNum:Number,
                        returnNum:Number,
                        surplusNum:Number,
                        depotCode:''
                    }
                        item.itemId = element.itemId;
                        item.itemCode = element.itemCode;
                        item.itemSkuName = element.itemSkuName;
                        item.purchaseNum = element.purchaseNum;
                        item.surplusNum = element.surplusNum;
                        this.items.push(item);
                    });
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.erpComplainReturn(parmas,success)
        },
        back(){
            this.$router.go(-1)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.comfirmReturn()
                } else {
                    return false;
                }
            });
        },
        getStore(){
            let success=data=>{
                if(data.code=="OK"){
                    this.stockIn=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.erpComplainDepotListAll({},success)
        },
        comfirmReturn(){
            var reg1 = /^[0-9]{1,5}\.?[0-9]{0,3}$/;//金额正则
            if(!this.ruleForm.returnMoney.match(reg1)){
                return this.$message.warning("金额为数字且保留两位小数")
            }
            if(!this.ruleForm.returnAgency.match(reg1)){
                return this.$message.warning("金额为数字且保留两位小数")
            }
            var arr=[]
            for(var val of this.itemsArr){
                var obj={
                    depotCode:'',
                    returnNum:'',
                    itemId:'',
                }
                obj.depotCode=val.depotCode,
                obj.returnNum=val.returnNum,
                obj.itemId=val.itemId
                arr.push(obj)
            }
            if(arr.length==0){
                return this.$message.waring("请选择你退货的商品,请先勾选，再填数字")
            }
            let parmas={
                complainId:this.returnData.complainId,
                orderId:this.returnData.orderId,
                returnMoney:this.ruleForm.returnMoney,
                returnAgency:this.ruleForm.returnAgency,
                postageAssume:this.returnData.postageAssume,
                extraCharges:this.returnData.extraCharges,
                userId:this.userId,
                items:arr
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success("退货申请成功")
                    this.$router.go(-1)
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.complainApplyReturn(parmas,success)
        },
        handleSelectionChange(selection){
            this.selection=selection
            this.itemsArr = []
            for(var value of this.items){
                value["flag"]=0
                for(var item of selection){
                    if(item.itemId == value.itemId){
                        item.flag = 1
                        this.getStore()
                    }
                }
            }
            for(var value of selection){
                if(value.flag == 1){
                    this.itemsArr.push(value)
                }
            }
        },
        changeVal(val){
            for(var item of this.selection){
                if(val > item.surplusNum){
                    return this.$message.warning("退货数量不能大于可退数量")
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.returnGoodsApply{
    .set-return{
        .table{
            margin-bottom:2px;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
        }
        .inputNum{
            background: #fff;
            padding: 20px 0;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
            .el-input{
                width:50%;
            }
        }
    }
    .info{
      background: #fff;
      margin-bottom: 2px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
    .btn{
        width:100%;
        text-align:center;
        padding-top:50px;
    }

}
</style>
